export default class Mine {
  constructor() {
    this.body = document.body;
    this.game = document.querySelector(".game");
    this.temp = "";
    this.len = 10;
    this.over = false;
    this.gameArr = Array.from({ length: 10 }, (item) => new Array(10).fill(0));
    this.mineArr = [];
    this.rightCount = 0; //右键次数
  }
  init() {
    this.renderBack();
    this.bindEvent();
    this.creatGameArr();
    console.table(this.gameArr);
    console.log(this.mineArr);
  }
  bindEvent() {
    this.body.addEventListener("click", this.leftClick.bind(this), false);
    this.body.addEventListener(
      "contextmenu",
      this.rightClick.bind(this),
      false
    );
  }
  leftClick(ev) {
    if (this.over) return;
    let target = ev.target;
    if (target.tagName === "DIV") {
      let index = target.getAttribute("data-index");
      this.render(index);
    }
  }
  rightClick(ev) {
    ev.preventDefault();
    if (this.over) return;
    let target = ev.target;
    let flag = target.style.backgroundColor === "";
    if (target.tagName === "DIV" && flag) {
      let rightCount = +target.getAttribute("data-rightCount");
      if (rightCount === 0) {
        ev.target.innerHTML = "旗";
      } else if (rightCount === 1) {
        ev.target.innerHTML = "?";
      } else {
        ev.target.innerHTML = "";
        target.setAttribute("data-rightCount", 0);
        return;
      }
      target.setAttribute("data-rightCount", rightCount + 1);
    }
  }
  render(index) {
    let x = ~~(index / this.len);
    let y = index % this.len;
    this.gameArr[x][y] === -1 && this.renderMine();
    this.gameArr[x][y] > 0 && this.renderNum(x, y);
    this.gameArr[x][y] === 0 && this.renderZero(x, y);
  }
  renderMine() {
    this.mineArr.forEach(function (item, index) {
      this[item].style.backgroundColor = "#de1c31";
      this[item].innerHTML = "炸";
    }, this.game.children);
    this.over = true;
  }
  renderNum(x, y) {
    let block = this.game.children[x * this.len + y];
    block.style.backgroundColor = "#74759b";
    block.innerHTML = this.gameArr[x][y];
  }
  renderZero(x, y) {
    if (x < 0 || y < 0 || x >= this.len || y >= this.len) return;
    if (this.gameArr[x][y] === 0) {
      this.game.children[x * this.len + y].style.backgroundColor = "#74759b";
      this.gameArr[x][y] = -2; //-2 是该方块打开 防止递归死循环 0的右边如果是0 ，那右边的左边就又是0，形成死循环
      for (let i = x - 1; i <= x + 1; i++) {
        for (let j = y - 1; j <= y + 1; j++) {
          this.renderZero(i, j);
        }
      }
    } else if (this.gameArr[x][y] > 0) {
      this.renderNum(x, y);
    }
  }
  renderBack() {
    let s = this.len ** 2;
    for (let i = 0; i < s; i++) {
      this.temp += `<div data-index=${i} data-rigthCount=0></div>`;
    }
    this.game.innerHTML = this.temp;
  }
  creatGameArr() {
    let count = this.len * 1.5;
    let y = ~~(Math.random() * this.len);
    let x = ~~(Math.random() * this.len);
    while (count) {
      while (this.gameArr[x][y] !== 0) {
        y = ~~(Math.random() * this.len);
        x = ~~(Math.random() * this.len);
      }
      this.gameArr[x][y] = -1; //布雷
      this.mineArr.push(x * this.len + y); //记录雷
      this.countMine(x, y, this.gameArr, this.len); //计算方块周围雷的数量
      count--;
    }
  }
  countMine(x, y, arr, len) {
    for (let i = x - 1; i <= x + 1; i++) {
      for (let j = y - 1; j <= y + 1; j++) {
        let flag = i >= 0 && i < len && j >= 0 && j < len;
        if (flag && arr[i][j] !== -1) {
          arr[i][j]++;
        }
      }
    }
  }
}
